<template>
    <div style="height: 3000px"></div>
    <div ref="target" style="height: 100px; width: 100px; background-color: red;"></div>
    <div style="height: 3000px"></div>
    <div class="fixed">{{targetVisible}}</div>
</template>
<script setup lang="ts">
import { useElementVisibility } from '@vueuse/core'
import { ref } from 'vue'
const target = ref(null)

const targetVisible = useElementVisibility(target)

</script>
<style scoped>
.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 5px;
    border: 1px solid gray;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: 800;
}
</style>